<style scoped>
.view {
  line-height: 28px;
  font-size: 14px;
  color: #258ffb;
  border: 1px solid #258ffb;
  padding: 0 15px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  height: 30px;
  margin: 0 10px;
  cursor: pointer;
}
.view:hover {
  background-color: #258ffb;
  color: #fff;
}
</style>
<!--  -->
<template>
  <div v-show="show" class="view" @click="viewDefaultDomain" v-loading="!(this.currentPageId > 0)">浏&nbsp;览</div>
</template>

<script>
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
import { mapGetters } from 'vuex'
export default {
  created () {
    PubSub.subscribe(PubsubType.PUBSUB_DESIGN_EDITOR_PAGE, (event, bool) => {
      this.show = bool
    })
  },
  computed: {
    ...mapGetters([
      'currentPageId'
    ])
  },
  data () {
    return {
      show: false,
      loading: true
    }
  },
  methods: {
    viewDefaultDomain () {
      if (this.currentPageId > 0) {
        const loading = this.$loading({
          lock: true,
          text: '正在打开...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$post('/url/page-link', {
          id: this.currentPageId
        }).then(response => {
          loading.close()
          if (response) {
            window.open(response, '_blank')
          }
        }, () => {
          loading.close()
        })
      }
    }
  }
}

</script>
